<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div class="white-bg">
	<div align="center">
		<div class="main-content">
			<form id="form-user-edit">
				<input id="userId" name="userId"  type="hidden"/>
				<input name="deptId" type="hidden" id="treeId2"/>
				<table class="table table-striped table-bordered table-td">
			        <tbody>
			        	<tr>
		                	<td>
			                	<label class="is-required">用户名称：</label>
			                </td>
			                <td>
		                		<input id="userName" name="userName" class="easyui-textbox" style="width:250px;" data-options="prompt:'请输入用户名称',validType:['length[1,30]'],required:true" type="text">
			                </td>
			                <td>
			                	<label>归属部门：</label>
		                	</td>
			                <td>
				                 <div class="input-group">
                            		<input name="deptName" onclick="selectDeptTree()" id="treeName2" type="text" readonly="true" placeholder="请选择归属部门" class="form-control" >
                                	<span class="input-group-addon"><i class="fa fa-search"></i></span>
                            	</div>
			                </td>
			            </tr>
			            <tr>
			            	<td>
			                	<label class="is-required">登录账号：</label>
		                	</td>
			                <td>
	                	 		<input id="loginName" name="loginName" class="easyui-textbox" style="width:250px;" data-options="prompt:'请输入登录账号',readonly:true" type="text">
			                </td>
			                <td>
			                	<label>手机号码：</label>
		                	</td>
			                <td>
	                	 		<input id="phonenumber" name="phonenumber" class="easyui-textbox" style="width:250px;" data-options="prompt:'请输入手机号码',validType:['length[1,11]','mobile']" type="text">
			                </td>
		                </tr>
		                <tr>
			                <td>
			                	<label>用户性别：</label>
		                	</td>
			                <td>
	                	 		<select name="sex" class="easyui-combobox" style="width: 150px;" data-options="required:true,editable:false,panelHeight:100" th:with="type=${@dict.getType('sys_user_sex')}">
	                    			<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
	                			</select>
			                </td>
			                <td>
			                	<label>用户状态：</label>
			                </td>
			                <td>
			                	<label class="toggle-switch switch-solid">
	                            	<input type="checkbox" id="status" th:checked="${user.status == '0' ? true : false}">
	                            	<span></span>
	                        	</label>
			                </td>
		                </tr>
		                <tr>
			                <td>
			                	<label>邮箱：</label>
		                	</td>
			                <td colspan="3">
	                	 		<input id="email" name="email" class="easyui-textbox" style="width:670px;" data-options="prompt:'请输入邮箱',validType:['length[1,110]','email']" type="text">
			                </td>
			            </tr>
			            <tr>
			               <td>
			                	<label>岗位：</label>
		                	</td>
			                <td colspan="3">
								<label th:each="post:${posts}" class="check-box">
									<input name="post" type="checkbox" th:value="${post.postId}" th:text="${post.postName}" th:checked="${post.flag}" th:disabled="${post.status == '1'}">
								</label>
			                </td>
			            </tr>
		                <tr>
			                <td>
			                	<label>角色：</label>
		                	</td>
			                <td colspan="3">
	                	 		<label th:each="role:${roles}" class="check-box">
									<input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="${role.flag}" th:disabled="${role.status == '1'}">
								</label>
			                </td>
		                </tr>
		                <tr>
			                <td>
			                	<label>备注：</label>
		                	</td>
			                <td colspan="3">
	                	 		<input id="remark" class="easyui-textbox" name="remark" data-options="prompt:'请输入备注',validType:['maxLength[100]'],multiline:true" style="height:60px;width:670px;">
			                </td>
			            </tr>
				 	</tbody>
			    </table>
			    <div id="dlg-buttons">
			    	<a class="easyui-linkbutton" iconCls="icon-save" onclick="submitHandler()">保存</a>
                    <a class="easyui-linkbutton" iconCls="icon-cancel" onclick="$.easyUIModal.close()">关闭</a>
		    	</div>
		    </form>
		</div>
	</div>
</div>
<script th:inline="javascript">
	debugger;
	var user = [[${user}]];
	$('#form-user-edit').form('load', user);
	$("#treeName2").val(user.userDeptName);
	
	$("#email").textbox({
		onChange: function (newValue, oldValue) {
			if($.common.trim(newValue) != $.common.trim(oldValue)){
				var url = prefix + "/checkEmailUnique";
				var queryParams = {
					"userId" : $("#userId").val(),
					"email" : $.common.trim(newValue)
				};
				$.easyUIOperate.ajax(url, "post", "json", queryParams, function(result){
					if(!$.validate.unique(result)){
						$("#email").textbox("setValue","").textbox("textbox").focus();
						$.messager.show({
							title : '提示',
							msg : "该Email已经存在！",
							timeout: 1000
						});
					}
				});
			}
		}
	});
	
	$("#phonenumber").textbox({
		onChange: function (newValue, oldValue) {
			if($.common.trim(newValue) != $.common.trim(oldValue)){
				var url = prefix + "/checkPhoneUnique";
				var queryParams = {
					"userId" : $("#userId").val(),
					"phonenumber" : $.common.trim(newValue)
				};
				$.easyUIOperate.ajax(url, "post", "json", queryParams, function(result){
					if(!$.validate.unique(result)){
						$("#phonenumber").textbox("setValue","").textbox("textbox").focus();
						$.messager.show({
							title : '提示',
							msg : "该手机号码已经存在！",
							timeout: 1000
						});
					}
				});
			}
		}
	});
    function selectDeptTree() {
    	var treeId = $("#treeId2").val();
    	var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId2").val();
    	var url = ctx + "system/dept/selectDeptTree/" + deptId;
    	// 皮肤缓存
    	var skin = storage.get("skin");
    	var panelWindowTheme = "";
    	var panelWindowHeaderTheme = "";
    	var panelWindowBodyTheme = "";
    	// 本地主题优先，未设置取系统配置
    	if($.common.isNotEmpty(skin)){
    		panelWindowTheme = "easyui-window-" + skin.split('|')[0];
    		panelWindowHeaderTheme = "easyui-window-header-" + skin.split('|')[0];
    		panelWindowBodyTheme = "easyui-window-body-" + skin.split('|')[0];
    	}
    	var dialogObj = $('<div id="selectDeptTreeDialog" style="overflow-x:hidden;"/>');
    	dialogObj.dialog({
    		href: url,
			width : 350,
			height : ($(window).height() - 150),
			modal : true,
			maximizable: true,
			title : "部门选择",
			buttons : [ {
				text : '提交',
				iconCls : 'icon-save',
				handler : function() {
					var treeId = $("#treeId").val();
					var treeName = $("#treeName").val();
		    		if($.common.isEmpty(treeName)){
		    			$.messager.alert("提示", "请选择部门！", 'warning');
		    			return false;
		    		}
		    		$("#treeId2").val(treeId);
				    $("#treeName2").val(treeName);
		    		dialogObj.dialog('destroy');
				}
			},{
				text : '关闭',
				iconCls : 'icon-cancel',
				handler : function() {
					dialogObj.dialog('destroy');
				}
			} ],
			onOpen : function(){
				$("#selectDeptTreeDialog").parents(".window").addClass(panelWindowTheme);
				$("#selectDeptTreeDialog").addClass(panelWindowBodyTheme);
				$("#selectDeptTreeDialog").siblings(".window-header").find(".panel-title").addClass(panelWindowHeaderTheme);
			},
			onClose : function() {
				dialogObj.dialog('destroy');
			}
		});
	}
	function submitHandler() {
		if($("#form-user-edit").form('validate')){
			var data = $("#form-user-edit").serializeArray();
        	var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
        	var roleIds = $.form.selectCheckeds("role");
        	var postIds = $.form.selectCheckeds("post");
        	data.push({"name": "status", "value": status});
        	data.push({"name": "roleIds", "value": roleIds});
        	data.push({"name": "postIds", "value": postIds});
			$.ajax({
				cache : true,
				type : "POST",
				url : prefix + "/edit",
				data : data,
				async : false,
				error : function(request) {
					$.messager.alert("提示", "系统错误", 'error');
				},
				success : function(data) {
					$.easyUIOperate.successCallback(data);
				}
			});
		}
	}
</script>